<template>
  <div class="model-container">
    <div class="listName">抢购管理</div>
    <!--表格-->
    <el-card style="margin-top: 10px">
      <div v-if="getUser().sellerId !== null" slot="header" class="clearfix">
        <div class="btns-wrapper-left" >
          <el-button type="primary" plain @click="add">新建抢购</el-button>
        </div>
      </div>
      <div class="table-wrapper">
        <el-table v-loading="!dataOption" :data="dataOption" stripe border empty-text="暂无数据">

          <el-table-column align="center" prop="activityName" label="活动名称"/>

          <el-table-column align="center" prop="startTime" label="开始时间"/>

          <el-table-column align="center" prop="endTime" label="结束时间"/>

          <el-table-column v-if="getUser().sellerId === null" align="center" label="同步">
            <template slot-scope="scope">
              <span style="color: #1e6abc;cursor: pointer" @click="synchronousNes(scope.row)">同步到平台</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.status === 0" class="statusClass0">{{ statusVal(scope.row.status) }}</span>
              <span v-else-if="scope.row.status === 1" class="statusClass1">{{ statusVal(scope.row.status) }}</span>
              <span v-else-if="scope.row.status === 2" class="statusClass2">{{ statusVal(scope.row.status) }}</span>
              <span v-else-if="scope.row.status === 3" class="statusClass3">{{ statusVal(scope.row.status) }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="操作" width="300px">
            <template slot-scope="scope">

              <el-button v-if="scope.row.status === 3" type="success" size="mini" plain @click="starton(scope.row)">发布</el-button>

              <el-button v-if="scope.row.status === 3" type="primary" size="mini" plain @click="edit(scope.row)">编辑</el-button>

              <el-button v-if="scope.row.status !== 3" type="success" size="mini" plain @click="check(scope.row)">查看</el-button>

              <el-button v-if="scope.row.status !== 2 && scope.row.status !== 3" type="warning" size="mini" plain @click="over(scope.row)">下架</el-button>

              <el-button v-if="scope.row.status === 3" type="danger" size="mini" plain @click="del(scope.row)">删除</el-button>

            </template>
          </el-table-column>

        </el-table>

        <!--分页-->
        <el-pagination
          :current-page="pageNo"
          :page-sizes="[10, 20, 30]"
          :page-size="pageSize"
          :total="rowCount"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </el-card>

  </div>
</template>

<script>
import * as activity from '../../api/activity'
import { getUserInformation } from '@/utils/auth'
export default {
  data() {
    return {
      // 页面搜索
      seacherParam: {},
      searchShow: false,
      pageNo: 1,
      pageSize: 10,
      rowCount: null, // 总条数
      // 按钮状态
      buttonState: false,
      // 列表数据
      dataOption: null
    }
  },
  beforeMount() {
    this.getList()
  },
  created() {
    this.pageNo= this.getContextData("pageData") || 1;
    this.getList()
  },
  methods: {
    //给sessionStorage存值
    setContextData: function(key, value) {
      if(typeof value == "string"){
        sessionStorage.setItem(key, value);
      }else{
        sessionStorage.setItem(key, JSON.stringify(value));
      }
    },
    // 从sessionStorage取值
    getContextData: function(key){
      const str = sessionStorage.getItem(key);
      if( typeof str == "string" ){
        try{
          return JSON.parse(str);
        }catch(e) {
          return str;
        }
      }
      return;
    },
    // 获取用户信息
    getUser() {
      return JSON.parse(getUserInformation())
    },
    // 同步到平台
    synchronousNes(data) {
      this.$confirm('确认要同步到平台吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const param = {
          activityId: data.id,
          sellerIds: [0]
        }
        activity.saveBatchList(param).then(res => {
          if (res.data.code === 1) {
            this.$message({
              type: 'success',
              message: '同步成功'
            })
            this.getList()
          }
        })
      }).catch(() => {
        console.log('已取消')
      })
    },
    getList() {
      const param = {
        current: this.pageNo,
        size: this.pageSize,
        activityType: 0
      }
      if (this.getUser().sellerId !== null) {
        param.sellerId = this.getUser().sellerId
      }
      activity.getSnapupList(param).then(res => {
        if (res.data.code !== 1) {
          this.$message.error(res.data.msg)
          return false
        }
        if (res.data.data === 'null' || res.data.data === null) {
          return false
        }
        // 初始话表格数据
        this.dataOption = res.data.data.records
        // 初始化分页数据
        this.rowCount = res.data.data.total
        this.pageSize = res.data.data.size
      })
    },
    // 新增
    add() {
      this.$router.push({
        name: '/v1/addsnapup',
        params: {
          type: 1
        }
      })
    },
    // 编辑
    edit(data) {
      this.$router.push({
        name: '/v1/addsnapup',
        params: {
          type: 2,
          data: data
        }
      })
    },
    // 查看
    check(data) {
      this.$router.push({
        name: '/v1/addsnapup',
        params: {
          type: 3,
          data: data
        }
      })
    },
    // 删除
    del(data) {
      this.$confirm('是否删除此活动?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const classID = []
        classID.push(data.id)
        activity.delSnapupList(classID).then(res => {
          if (res.data.code === 1) {
            this.getList()
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 下架
    over(data) {
      const param = {
        id: data.id,
        status: 2
      }
      this.$confirm('是否要下架活动吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.statusFun(param)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 开始进行
    starton(data) {
      const param = {
        id: data.id,
        status: 1
      }
      this.$confirm('确认要发布活动吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.statusFun(param)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    statusFun(param) {
      activity.goActivui(param).then(res => {
        if (res.data.code === 1) {
          this.getList()
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        }
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.pageNo = val
      this.setContextData("pageData",this.pageNo)
      this.getList()
    },
    handleClose() {
      for (const key in this.dialogBindData) {
        this.dialogBindData[key] = ''
      }
      this.dialogState = false
      this.$refs.dialogBindData.clearValidate()
    },
    statusVal(type) {
      if (type === 0) {
        return '进行中'
      } else if (type === 1) {
        return '已发布'
      } else if (type === 2) {
        return '已结束'
      } else if (type === 3) {
        return '待发布'
      }
    }
  }
}
</script>
<style type="text/scss" lang="scss" scoped>
  .statusClass2{
    color: #e6a23c;
  }
  .statusClass0{
    color: #163cf5;
  }
  .statusClass1{
    color: #409EFF;
  }
  .statusClass3{
    color: #33CC00;
  }
</style>
